<template>
	<div>
		<el-container>
			<el-header>
				<div style="width: 100%;border-bottom: 1px solid black;margin-top: -20px;line-height: 70px;">
					<span style="font-size: 18px;font-weight: bold;">类型</span>
					<el-button style="float: right;line-height: 40px;width:110px;">添加类型</el-button>
				</div>
			</el-header>
			<el-main>
				<el-table
				    :data="typelist"
				    border
				    style="width: 100%">
				    <el-table-column
				      prop="id"
				      label="日期"
				      width="180">
				    </el-table-column>
				    <el-table-column
				      prop="type"
				      label="书本类型"
				      width="1000">
				    </el-table-column>
				    <el-table-column
				      label="功能">
					  <!-- <el-button type="primary" >修改</el-button> -->
					  <template #default="scope">
						   <el-button type="primary" @click="typedit(typelist[scope.$index])" >修改</el-button>
					  </template>
				    </el-table-column>
				  </el-table>
			</el-main>
		</el-container>
		<el-dialog v-model="dialogTableVisible">
		   {{bianliang}}
		   <span style="position: absolute;top: 6%;left: 2%;font-size: 18px;">类型信息</span>
			<div>
				<el-form>
					<div style="display: flex;line-height: 50px;margin-top: 5px;">
						<label style="width: 10%;">ID</label>
						<div style="width: 92%;">
							<el-input
							  type="number"
							  autocomplete="off"
							  v-model.lazy.trim="typeid"
							></el-input>
						</div>
					</div>
					<div style="display: flex;line-height: 50px;margin-top: 5px;">
						<label style="width: 10%;">类型</label>
						<div style="width: 92%;">
							<el-input
							  type="next"
							  autocomplete="off"
							  v-model.lazy.trim="types"
							></el-input>
						</div>
					</div>
					<el-button  @click="postData()"
					style="margin-top: 20px;"
					  >修改</el-button>
				</el-form>
			</div>
		  </el-dialog>
	</div>
</template>

<!-- <el-form-item label="ID" >
	      <el-input
	        type="password"
	        autocomplete="off"
	      ></el-input>
	    </el-form-item>
	    <el-form-item label="Confirm">
	      <el-input
	        type="password"
	        autocomplete="off"
	      ></el-input>
	    </el-form-item>
	    <el-form-item>
	      <el-button type="primary" @click="submitForm('ruleForm')"
	        >Submit</el-button>
	 </el-form-item> -->
<!-- 	右侧
	<div class="type_right">
		<p>{{title}}</p>
		<p>
			类型ID：
			将id输入框设置为；只读
			<input type="number" readonly v-model.lazy.trim="typeid" />
		</p>
		<p>
			类型名称：
			<input type="text" v-model.lazy.trim="types" />
		</p>
		<p><button @click="postData()">{{title}} 提交</button></p>
	</div> -->

<script>
import { defineComponent, reactive, toRefs } from 'vue'
export default{
	name:'Type',
	data(){
		return{
			typelist:[],		//请求接受的数据
			title:'浏览中',		//状态
			typeid:'',			//类型id
			types:'',			//类型名称
			bianliang:{},
			dialogTableVisible:false,
		}
	},
	methods:{
		// 点击切换修改类型 x参数表示当前被点击的数组下标
		typedit( x ){
			// this.title = '修改类型';
			// // 直接从typelist数组内提出指定下标的数据
			// this.typeid = this.typelist[x].id;
			// this.types = this.typelist[x].type;
			this.bianliang = x;
			this.dialogTableVisible = true;
			console.log(this.bianliang);
			console.log(this.bianliang.id);
			this.typeid = this.bianliang.id;
			this.types = this.bianliang.type;
		},
		// 点击切换添加界面
		typeadd(){
			this.title = '添加类型';
			this.typeid = 0;
		},
		// 点击向后台的数据库提交输入框的数据【post请求】
		postData(){
			// 备份
			let that = this;
			// 判断名称不为空
			if(this.types != '' && this.typeid !== ''){
				// 发起post请求	请求地址 + 提交数据 + 表头配置
				/*
					请求地址：/api/adm/type/add
					提交的数据：this.$qs.stringify( data )
					配置：header对象
				*/
			   // 将提交的数据打包
			   let data = {
				   id : this.typeid,
				   type : this.types,
			   }
				this.axios.post( '/api/adm/type/add' , this.$qs.stringify( data ),{
					// 告知服务器本次请求的方式以及编码格式
					headers : { 'Content-Type' : 'application/x-www-form-urlencoded ; charset=UTF-8' }
				} ).then( (res)=>{
					if(res.status === 200){
						// 将新获取的数据重新赋值给typelist
						that.typelist = res.data.data;
						// 清空输入框
						this.typeid = '';
						this.types = '';
					}
				} ).catch( (error)=>{
					console.log(error);
				})
			}
		}
	},
	// 组件创建之后
	created() {
		// 发起get请求，获取数据
		this.axios.get('/api/adm/type/findAll').then( (res)=>{
			// 判断状态
			console.log(res);
			if(res.status === 200){
				// 向表格渲染数据
				this.typelist = res.data.data;
				console.log(this.typelist);
			}
		} ).catch( (error)=>{
			console.log(error);
		} )
	}
}
</script>

<style>
.type_header{
	border: 1px solid black;
	line-height: 80px;
}
.type_header span{
	font-size: 25px;
	font-weight: bold;
}
.type_header button{
	float: right;
	height: 35px;
	width: 65px;
	margin-top: 20px;
	font-size: 23px;
	color: #0000EE;
}
.type_bottom{
	display: flex;
}
.type_left{
	width: 50%;
}
.type_left table tr td{
	border: 1px solid black;
}
.type_left table tr td:nth-child(1){
	width: 50px;
}
.type_left table tr td:nth-child(2){
	width: 300px;
}
.type_left table tr td:nth-child(3){
	width: 100px;
}
</style>
